<template>
  <Row class="areaSelect" :gutter="10">
    <Col :span="8">
      <Select :value="province" placeholder="请选择省份" @on-change="changeValue(0,$event)">
        <Option v-for="item in provinces" :value="item.code" :key="item.code">{{ item.names }}</Option>
      </Select>
    </Col>
    <Col :span="8">
      <Select :value="city" placeholder="请选择市" @on-change="changeValue(1,$event)">
        <Option v-for="item in cities" :value="item.code" :key="item.code">{{ item.names }}</Option>
      </Select>
    </Col>
    <Col :span="8">
      <Select :value="county" placeholder="请选择县/区" @on-change="changeValue(2,$event)">
        <Option v-for="item in counties" :value="item.code" :key="item.code">{{ item.names }}</Option>
      </Select>
    </Col>
  </Row>

</template>

<script>
  import areaData from './city'

  export default {
    name: 'areaSelect',
    components: {},
    props: {
      value: {
        type: Array,
        required: true
      },
      change: {}
    },
    data() {
      return {};
    },
    mounted() {
    },
    methods: {
      changeValue(index, value) {
        let temp = areaData.find(item => item.code == value);
        if (temp) {
          var result = this.value.splice(0, index).concat(temp)
          this.$emit('input', result)
          this.$emit('change', result)
        }

      },
    },
    computed: {
      province() {
        return this.value[0] ? this.value[0].code : '';
      },
      provinces() {
        return areaData.filter(item => item.level == 0)
      }
      ,
      city() {
        return this.value[1] ? this.value[1].code : '';
      }
      ,
      cities() {
        return areaData.filter(item => item.level == 1 && this.province.substr(0, 2) == item.code.substr(0, 2))
      }
      ,
      county() {
        return this.value[2] ? this.value[2].code : '';
      }
      ,
      counties() {
        return areaData.filter(item => item.level == 2 && this.city.substr(0, 4) == item.code.substr(0, 4))
      }
      ,

    }
  }
  ;
</script>

<style scoped lang="scss">
  .areaSelect {
  }
</style>
<style lang="scss">
  .areaSelect {
  }
</style>
